<template>
    <div>
         <li>
            <label>
              <!-- change 改变 -->
                <input type="checkbox" v-model="todo.done" @click="handleCheck(todo.id)" />
                <span v-show="!todo.isEdit" >{{todo.titio}}</span>
              <input v-show="todo.isEdit"  type="text" :value="todo.titio"
              @blur="handBlur(todo,$event)" ref="inputTitio">
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
           <button class="btn btn-edit" @click="handleEdit(todo)">修改</button>
        </li>
    </div>
</template>

<script>
export default {
  name: "RowLi",
  data() {
    return {};
  },
  methods: {
    //编辑
    handleEdit(todo){
      if(todo.hasOwnProperty("isEdit")){
        todo.isEdit=true
      }else {
      this.$set(todo,"isEdit",true)
      }
      this.$nextTick(function (){
        this.$refs.inputTitio.focus()
      })
    },
    //失去焦点回调(真正执行修改逻辑)
    handBlur(todo,e){
      todo.isEdit=false
      this.$bus.$emit("updatoTodo",todo.id,e.target.value)
    },
    handleCheck(id) {
      //this.checkTod(id);
      this.$bus.$emit("checkTod", id);
    },
    handleDelete(id) {
      if (confirm("确定删除吗")) {
        this.$bus.$emit("removeBtn", id);
      } //this.removeBtn(id);
    }
  },
  props: {
    todo: {
      //type: Object,
      required: true //item 是必要的
    }
  },
  updated() {

  }
};
</script>

<style lang="css" scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  user-select: none;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  margin-top: 3px;
  display: none;
}
li:hover {
  background: #ddd;
}
li:hover button {
  display: block;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>